<template>
  <div class="recharge">
    <div class="title-msg">充值中心</div>
    <div class="option-site">
      <span>输入充值金额:</span>
      <input type="text" v-model="money">

      <div class="money-option-site">
        <MoneyItem @itemClickEmit="value => {this.money = value}" :value="100"></MoneyItem>
        <MoneyItem @itemClickEmit="value => {this.money = value}" :value="1000"></MoneyItem>
        <MoneyItem @itemClickEmit="value => {this.money = value}" :value="10000"></MoneyItem>
        <MoneyItem @itemClickEmit="value => {this.money = value}" :value="100000"></MoneyItem>
        <MoneyItem @itemClickEmit="value => {this.money = value}" :value="1000000"></MoneyItem>
        <MoneyItem @itemClickEmit="value => {this.money = value}" :value="10000000"></MoneyItem>
      </div>

      <button @click="rechargeClick">确认充值</button>
    </div>
  </div>
</template>

<script>
  import MoneyItem from "./childComps/MoneyItem";

  import {verToken} from 'common/utils'
  import {mapGetters} from 'vuex'

  import {prefectUserInfo} from 'network/user'
  import {searchUserByUsername} from 'network/mix'

  export default {
    name: "Recharge",
    components: {
      MoneyItem,
    },
    computed: {
      ...mapGetters({
        token: 'getToken'
      }),
    },
    created() {
      if (this.token) {
        searchUserByUsername(verToken(this.token).username)
          .then(res => {
            // console.log(res);
            this.user = res.user
            this.user.birthday = new Date(res.user.birthday);
          })
          .catch(error => {
            console.log(error);
          })

      }
    },
    methods: {
      rechargeClick() {
        this.user.money = this.user.money + this.money
        if (this.money > 0) {
          if (confirm('确认充值' + this.money + '吗?')) {
            this.mPreUserInfo(this.user)
          }
        } else {
          this.$err_ty_toast.toShow('请保证您输入的金额大于0', 2000)
        }
      },



      mPreUserInfo(user) { // 完善用户信息axios网络请求,用于更新用户的money
        prefectUserInfo(user)
          .then(res => {
            // console.log(res);
            this.$succ_ty_toast.toShow('充值' + this.money + '元成功！！！', 5000)
            this.money = 0
          })
          .catch(error => {
            console.log(error);
          })
      }
    },
    data() {
      return {
        money: 0,
        user: { // 用户对象
        },
      }
    },
  }
</script>

<style scoped>
  .recharge {
    height: 100%;
    /*background-color: green;*/
  }
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .option-site {
    position: relative;

    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    height: 530px;

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #fff;
  }
  .option-site span {
    position: absolute;
    top: 11px;
    left: 30%;

    font-weight: bold;
    font-size: 20px;
  }
  .option-site input {
    position: absolute;
    top: 10px;
    left: 40%;

    width: 200px;
    height: 30px;
  }
  .option-site button {
    position: absolute;
    left: 40%;
    bottom: 60px;
    width: 300px;
    height: 40px;

    font-weight: bold;
    font-size: 24px;
    color: white;

    border-radius: 6px;
    border: none;
    outline: none;
    background-color: #28a745;
  }
  .option-site button:hover {
    opacity: 0.75;
    cursor: pointer;
  }

  .money-option-site {
    margin-top: 50px;
    padding-left: 100px;
    padding-right: 100px;

    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*background-color: yellow;*/
  }
</style>